<template>
  <div>
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          :to="{ path: $store.getters.getBreadcrumb('level1').path }"
          >{{ $store.getters.getBreadcrumb("level1").name }}</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{
            path: '/settlement-management/settlement-maintenance-approval'
          }"
          >结算管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{
            path: '/settlement-management/transportation-maintenance-approval'
          }"
          >运输结算管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{
            path: backUrl
          }"
          >结算单冲销</el-breadcrumb-item
        >
        <el-breadcrumb-item>
          <span>查看</span>
          <span class="ccui-curr-crumb ccui-ml-10">
            {{ titleName }}
          </span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="ccui-app-container-detail">
      <div class="ccui-app-container-detail-body">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          class="el-tabs__customize"
        >
          <el-tab-pane label="基本信息" name="first">
            <detailInformation
              ref="baseInfo"
              :dataInfo="baseInfoData"
            ></detailInformation>
          </el-tab-pane>

          <el-tab-pane label="结算单明细" name="second">
            <financeInfoCheck
              ref="settlementDetail2"
              :settlementList="settlementList"
            ></financeInfoCheck>
          </el-tab-pane>
          <el-tab-pane v-if="isTrue" label="附件" name="fourth">
            <fileInfo
              ref="fileInfo"
              isTab
              state="detail"
              v-model="fileList"
            ></fileInfo>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <el-bottom-guide>
      <ul class="ccui-bottom-button">
        <li>
          <el-button type="bottom" icon="icon-ccui-return" @click="handleBack"
            >返回</el-button
          >
        </li>
      </ul>
    </el-bottom-guide>
  </div>
</template>

<script>
import { getSessionItem, ishasAgentId } from "@/basa/utils";
import detailInformation from "./detailPages/detail-information";

import fileInfo from "@/basa/components/public/uploadInfo2";

import {
  getSettlementWriteById,
  listScFilesPage
} from "../api/settlement-written-off.js";
import financeInfoCheck from "./components/financeInfoCheck";
// import purchaseListCheck from "./components/purchaseListCheck";

export default {
  name: "settlement-detail-item",
  components: {
    detailInformation,
    // detailSummary,
    // detailInternaldetail,
    fileInfo,
    financeInfoCheck
    // purchaseListCheck
  },
  data() {
    return {
      settlementList: [],
      activeName: "first",
      readonlyInput: true,
      title: "新增信息",
      submitFlag: false,
      id: "",
      baseInfo: {},
      baseInfoData: {},
      settlementDetailData: [],
      acceptanceDetailData: [],
      fileList: [],
      totalNum: 0,
      isTrue: false,
      backUrl: "",
      titleName: ""
    };
  },

  methods: {
    getDetail(id) {
      const obj = { id: id };
      getSettlementWriteById(obj).then(res => {
        this.baseInfoData = res.data.data.settlementWriteOffBO;
        this.titleName = res.data.data.settlementWriteOffBO.writeoffName;
        this.baseInfoData.reversal =
          this.baseInfoData.writeoffStart +
          " 到 " +
          this.baseInfoData.writeoffEnd;
        this.baseInfoData.writeoffMoney =
          this.baseInfoData.writeoffMoney !== null &&
          this.baseInfoData.writeoffMoney !== undefined
            ? (+this.baseInfoData.writeoffMoney).toFixed(2)
            : "";
        this.baseInfoData.contractMoney =
          this.baseInfoData.contractMoney !== null &&
          this.baseInfoData.contractMoney !== undefined
            ? (+this.baseInfoData.contractMoney).toFixed(2)
            : "";
        this.fileList = res.data.data.writeOffFiles;
        this.$refs.baseInfo.form = this.baseInfoData;
        this.fileList.forEach(item => {
          item.createTime = item.uploadTime;
          item.uploadId = item.fileInfoId;
          item.fileSize = Math.round(item.fileSize / 1024) + "kb";
        });
        this.isTrue = true;
        this.settlementList = res.data.data.settlementBOList;
        //对金额和数量帮处理，金额保留两位小数，数量保留一位小数
        this.settlementList.forEach(item => {
          // 结算单明细的表处理
          item.settlementCount =
            item.settlementCount !== null
              ? (+item.settlementCount).toFixed(3)
              : "";
          item.settlementCountTotal =
            item.settlementCountTotal !== null &&
            item.settlementCountTotal !== undefined
              ? (+item.settlementCountTotal).toFixed(3)
              : "";

          item.unitPriceWithTax =
            item.unitPriceWithTax !== null &&
            item.unitPriceWithTax !== undefined
              ? (+item.unitPriceWithTax).toFixed(2)
              : "";

          item.moneyWithoutTax =
            item.moneyWithoutTax !== null && item.moneyWithoutTax !== undefined
              ? (+item.moneyWithoutTax).toFixed(2)
              : "";
          item.unitPriceWithoutTax =
            item.unitPriceWithoutTax !== null &&
            item.unitPriceWithoutTax !== undefined
              ? (+item.unitPriceWithoutTax).toFixed(2)
              : "";

          item.moneyWithTax =
            item.moneyWithTax !== null && item.moneyWithTax !== undefined
              ? (+item.moneyWithTax).toFixed(2)
              : "";

          item.settlementMoneyTotal =
            item.settlementMoneyTotal !== null &&
            item.settlementMoneyTotal !== undefined
              ? (+item.settlementMoneyTotal).toFixed(2)
              : "";
          // 验收单明细表的数据处理
          item.orderCount =
            item.orderCount !== null && item.orderCount !== undefined
              ? (+item.orderCount).toFixed(3)
              : "";

          item.acceptCount =
            item.acceptCount !== null && item.acceptCount !== undefined
              ? (+item.acceptCount).toFixed(3)
              : "";

          item.settlementPrice =
            item.settlementPrice !== null && item.settlementPrice !== undefined
              ? (+item.settlementPrice).toFixed(3)
              : "";
        });
      });
    },
    getFileList() {
      const obj = {
        pageNo: 1,
        pageSize: 10
      };
      listScFilesPage(obj).then(res => {
        this.totalNum = res.data.data.recordsTotal;
        this.fileList = res.data.data.rows;
        console.log(this.fileList);
      });
    },
    handleClick(tab, event) {
      console.log(tab, event, this.activeName);
    },

    // 返回
    handleBack() {
      this.$router.back();
    }
  },

  created() {
    this.id = this.$route.params.id;
    this.getDetail(this.id);
    this.backUrl = sessionStorage.getItem("fromPath");
  },
  beforeRouteEnter(to, from, next) {
    !(to.fullPath === from.fullPath) &&
      sessionStorage.setItem("fromPath", from.fullPath);
    next();
  },
  computed: {
    // 获取面包屑
    getBreadcrumb() {
      return getSessionItem("breadcrumb");
    }
  },
  // 更改列表缓存状态
  beforeRouteLeave(to, from, next) {
    if (this.submitFlag === true) {
      for (var key in this.$vnode.parent.componentInstance.cache) {
        delete this.$vnode.parent.componentInstance.cache[
          ishasAgentId(to.path, key)
        ];
      }
    }
    next();
  }
};
</script>
<style lang="scss" scoped>
// .el-input /deep/ input.el-input__inner {
//   width: 260px;
//   height: 30px;
//   border-radius: 4px;
//   border: 1px solid #cccccc;
// }
// .el-form-item-box {
//   float: left;
//   width: 325px;
//   margin-left: 116px;
//   margin-right: 60px;
//   // 440px
// }
// .ccui-form .ccui-form-shortInput {
//   width: 260px;
// }
// .ccui-form .ccui-form-textArea,
// .ccui-form .ccui-form-textArea .el-textarea {
//   width: 760px;
//   height: 100px;
// }
// .el-form-item-textarea {
//   float: left;
//   width: 825px;
//   margin-left: 116px;
// }

// /deep/.el-col-12 {
//   width: 500px;
// }
// //新增页tab切换样式
// /deep/.el-tabs__nav {
//   font-size: 14px;
//   font-family: PingFangSC-Semibold, PingFang SC;
//   font-weight: 600;
//   color: #333333;
// }
// /deep/.el-tabs__item {
//   padding: 0 15px;
// }
// /deep/.ccui-form .ccui-form-child-table.el-table th {
//   font-size: 13px;
//   font-family: PingFangSC-Semibold, PingFang SC;
//   font-weight: 600;
//   color: #4a4a4a;
// }
</style>
